<template>
  <div>
    cccc
      <h2>{{myMsg}}</h2>
  </div>
</template>

<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from "vue";

const props = defineProps({
  msg: String,
    
  })

  const myMsg = ref(props.msg)

  onBeforeMount(()=>{
    console.log('beforemount child',props.msg);
  })

 onMounted(()=>{
    console.log('mount child',props.msg);
  })

  onBeforeUpdate(()=>{
    console.log('beforeupdate child')
  })

  onUpdated(()=>{
    console.log('update child')
  })

  onBeforeUnmount(()=>{

    console.log('beforeunmounte child')

  })

  onUnmounted(()=>{
    console.log('unmount child')
  })


</script>
